 /*
 * @description: 售后维权列表
 * @Author: ice
 * @Date: 2021-04-09
 * @Last Modified by: --
 * @Last Modified time: --
 */
<template>
    <div class="goodAfterProtection">
        <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
        >
            <el-tab-pane
                label="全部订单"
                name="99"
            />
            <el-tab-pane
                label="仅退款"
                name="1"
            />
            <el-tab-pane
                label="退货退款"
                name="2"
            />
            <el-tab-pane
                label="换货"
                name="3"
            />
        </el-tabs>
        <div class="filterTab">
            <div class="filter-wrap">
                <p class="filter-names">
                    订单编号
                </p>
                <el-input
                    v-model="filterData.order_no"
                    placeholder="请输入订单编号"
                    size="small"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    售后编号
                </p>
                <el-input
                    v-model="filterData.apply_no"
                    placeholder="请输入售后编号"
                    size="small"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    用户昵称
                </p>
                <el-input
                    v-model="filterData.student_true_name"
                    placeholder="请输入用户昵称"
                    size="small"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    售后状态
                </p>
                <el-select
                    v-model="filterData.refund_status"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in refundList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div
                v-if="activeName === '99'"
                class="filter-wrap"
            >
                <p class="filter-names">
                    售后类型
                </p>
                <el-select
                    v-model="filterData.apply_type"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    创建时间
                </p>
                <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    @change="getTableData(1)"
                    :default-time="['00:00:00', '23:59:59']"
                    :style="{width: '350px'}"
                />
            </div>
        </div>

        <!-- table -->
        <table-protection
            ref="protection"
            :table="tableData"
            :table-type="activeName"
            @update="updateTable"
        />

        <!-- /分页 -->
        <div class="pagination-wrapper clearfixNew">
            <el-pagination
                background
                :current-page.sync="page.now_page"
                :page-size="page.page_size"
                layout="total, prev, pager, next, jumper"
                :total="page.total_count"
                @current-change="getTableData"
            />
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import tableProtection from '@/components/manage/market/table-protection.vue';
import imgPreview from '@/components/common/img-preview';

const FILTER = {
    order_no: '',//订单编号
    apply_no: '',//售后编号
    apply_type: 99,//售后类型
    student_true_name: '',//昵称
    refund_status: 99,//退款状态 99:全部,1:申请中,11:退货申请审核通过,2:申请通过,-1:申请不通过
};

const DATA = {
    // 创建时间
    date: [],
    // 售后类型列表
    typeList: [
        {value:99, label: '全部'},
        {value:1, label: '仅退款'},
        {value:2, label: '退货退款'},
        {value:3, label: '换货'},
    ]
};

export default {
    components: {
        tableProtection,
        imgPreview
    },
    data () {
        return {
            ...DATA,
            filterData: {
                ...FILTER
            },
            activeName: '99',//订单退款类型 99:全部, 1:仅退款, 2:退货退款
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: []
        };
    },
    computed: {
        // 售后状态列表
        refundList() {
            switch (this.activeName) {
                case '99':
                    return [{value:99, label: '全部'},
                        {value: 1, label: '售后待处理'},
                        {value: 11, label: '商家同意售后申请'},
                        {value: 12, label: '买家已退货，待商家确认收货'},
                        {value: 13, label: '等待商家发货'},
                        {value: 14, label: '商家已发货'},
                        {value: 15, label: '换货待买家签收'},
                        {value: 101, label: '售后处理进行中'},
                        {value: 102, label: '售后完成'},
                        {value: 103, label: '售后关闭'},
                        {value: 104, label: '用户撤销申请'}];
                case '1':
                    return [{value: 99, label: '全部'},
                        {value: 1, label: '售后待处理'},
                        {value: 103, label: '售后关闭'},
                        {value: 104, label: '用户撤销申请'},
                        {value: 102, label: '售后完成'}];
                case '2':
                    return [{value: 99, label: '全部'},
                        {value:1, label: '售后待处理'},
                        {value: 12, label: '买家已退货，待商家确认收货'},
                        {value: 104, label: '用户撤销申请'},
                        {value: 102, label: '售后完成'},
                        {value: 101, label: '售后处理中'}];
                case '3':
                    return [{value: 99, label: '全部'},
                        {value: 1, label: '售后待处理'},
                        {value: 11, label: '商家同意售后申请'},
                        {value: 12, label: '买家已退货，待商家确认收货'},
                        {value: 13, label: '等待商家发货'},
                        {value: 14, label: '商家已发货'},
                        {value: 15, label: '换货待买家签收'},
                        {value: 102, label: '售后完成'},
                        {value: 103, label: '售后关闭'},
                        {value: 104, label: '用户撤销申请'},
                        {value: 101, label: '售后处理进行中'}];
                default:
                    return [];
            }
        }
    },
    created () {
        this.getQuery();
        this.$store.commit('header/SET_HEADER', [{title: '校园商城'}, {title: '订单管理'},{title: '售后维权'}]);
        this.getTableData();
    },
    methods: {
        /**
         * @description 获取路由参数
         */
        getQuery () {
            let query = this.$route.query;

            if(query.status) {
                this.$set(this.filterData, 'refund_status', query.status);
            }
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            let cancel_apply_type = this.activeName === '99' ? this.filterData.apply_type : this.activeName;

            this.$post('/ShopGoodsOrderCancelApply/getList', {
                page_id: page || this.page.now_page,
                cancel_apply_type: cancel_apply_type,
                order_no: this.filterData.order_no,
                student_true_name: this.filterData.student_true_name,
                status: this.filterData.refund_status,
                create_start_time: this.date === null ? '' : (this.date.length > 0 ? (new Date(this.date[0]).getTime() / 1000) : ''),
                create_end_time: this.date === null ? '' : (this.date.length > 0 ? (new Date(this.date[1]).getTime() / 1000) : '')
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 切换订单类型
         */
        handleClick () {
            this.getTableData(1);
        },

        /**
         * @description 更新表格数据
         */
        updateTable () {
            this.getTableData();
        }
    }
};
</script>

<style lang="less" scoped>
.goodAfterProtection {
    width: 100%;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 24px 0px 24px;
    .header {
        color: #333;
        font-size: 18px;
        font-weight: 500;
        margin: 24px 0 15px 0;
    }
    .filterTab {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        .filter-wrap {
            display: flex;
            margin: 0 20px 24px 0;
            height: 32px;
            align-items: center;
            .filter-names {
                width: auto;
                white-space: nowrap;
                color: #333;
                font-size: 14px;
                margin-right: 16px;
            }
        }
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>

<style lang="less">
.goodAfterProtection {
    .el-tabs__item {
        box-shadow: none !important;
    }
}
</style>
